<template>
	<view>
		<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-orange"  :isBack="true"  backText="返回" title="输入框"></cu-custom>
		<view class="margin-top-sm">
			<view class="cu-bar bg-white " >
				<view class="action" style="font-size: 32rpx;font-weight:bold;" >
					<text>普通输入框</text>
				</view>
			</view>
			<zh-form>
			<zh-input v-model="nikeName" :required="true" type="text" label="标签靠左输入靠右" labelAlign="left" inputAlign="right" ></zh-input>
			<zh-input v-model="nikeName" labelWidth="300rpx" :required="true" type="text" label="标签靠右" labelAlign="right" inputAlign="right" ></zh-input>
			<zh-input v-model="nikeName" labelWidth="300rpx" :required="true" type="text" label="输入靠左" labelAlign="left" inputAlign="left" ></zh-input>
			<zh-input type="text" v-model="nikeName"  maxlength="50" placeholder="标签图标" iconClass="basefont icon-home-fill text-blue" ></zh-input>
			<zh-input type="text" v-model="nikeName"  maxlength="50" label="右侧图标" labelAlign="left" rightIconClass="basefont icon-home-fill text-blue" @right-icon-click="openCellphone"></zh-input>
			<zh-input v-model="nikeName" :required="true" type="text" label="右侧文本" labelAlign="left" inputAlign="right" :rightButtonFlag="true" :rightButton="{text:'修改',bg:'bg-white',color:'#F85E64',textFlag:true}" @right-button-click="openCellphone" ></zh-input>
			<zh-input v-model="nikeName" :required="true" type="text" label="右侧按钮" labelAlign="left" inputAlign="right" :rightButtonFlag="true" :rightButton="{text:'修改',bg:'bg-white',bg:'bg-blue',rightButtonFlag:true}" @right-button-click="openCellphone" ></zh-input>
			<zh-input v-model="password" :required="true" type="text" label="密码输入框" labelAlign="left" inputAlign="right"  :password="true"  ></zh-input>
			<zh-input v-model="data2" :required="true" :clearFlag="true" type="text" label="带清除图标" labelAlign="left" inputAlign="right" ></zh-input>
			</zh-form>
		</view>
		<view class="margin-top-sm">
			<view class="cu-bar bg-white " >
				<view class="action" style="font-size: 32rpx;font-weight:bold;" >
					<text>文本域输入框</text>
				</view>
			</view>
			<zh-input v-model="data1" placeholder="未填写" type="textarea" inputMaxlength="250" label="文本域" labelAlign="left" inputAlign="left" ></zh-input>
			
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.headerKey += 1;
		},
		data() {
			return {
				headerKey:0,
				nikeName:'',
				data1:'',
				data2:'',
				password:''
			}
		},
		methods: {
			openCellphone(){
				uni.showToast({
					title:"点击了按钮"
				})
			}
		}
	}
</script>

<style>

</style>
